<template>
  <div>

    <!-- 第一个区域 主要信息 开始  -->
        <div class="leader-resume" v-if='response'>
            <div class="pic">
                <img :src="srcImg" alt="" />
            </div>
            <div class="leader-container">	
                <div class="basic-info ellipsis">
                <h2 >{{response && response.info[0].name}}</h2>
                <span class="sex" v-if="age"> ({{age}})</span>
                </div>
                <div class="posi-info ellipsis">
                <span class="sex" >{{response && response.info[0].sex_descr}}</span>   <span>{{response && response.info[0].ethnic_grp}}</span>      <span v-if="response.info[0].birthdate && response.info[0].birthdate.trim()">{{response.info[0].birthdate | handleBirth}}</span>
                </div>
            </div>
        </div>
        <section class="main">

            <div class="main-content">
                <p><span>籍贯</span><span> {{response && response.info[0].native_place_chn}}</span></p>
                <p><span>出生地</span><span> {{response && response.info[0].birthplace}}</span></p>
                <p><span>政治面貌</span><span> {{response && response.info[0].political_sta_chn}}</span></p>
                <p><span>入党时间</span><span> {{response && response.summary[0].c_party_time | handlePartyTime}}</span></p>
                <p><span>工作时间</span><span> {{response && response.summary[0].c_work_time | handlePartyTime}}</span></p> 
                <p><span>健康状况</span><span> {{response && response.summary[0].c_health_descr}}</span></p> 
                <p><span>专业技术</span><span> {{response && response.summary[0].c_tech_position}}</span></p> 
                <p><span>熟悉专业</span><span> {{response && response.info[0].major_descr}}</span></p> 
                <p><span>有何专长</span><span> {{response && response.summary[0].c_profesol_spec}}</span></p>
            </div>


        </section>

        <!-- 第一个区域 主要信息 结束  -->

        <!-- 第二个区域 教育信息开始 -->

        <section class="education">
            <h2 class="education-title">
                教育信息
            </h2>
            <div class="education-content">
            <ul v-if="response.summary.length>0">
                <li v-if="response.summary[0].c_ful_edu_school && response.summary[0].c_ful_edu_school.trim()">
                    
                    <p><i data-v-6626a34c=""></i>{{response.summary[0].c_ful_edu_school}}</p>
                    <p>
                        
                        <span>{{response.summary[0].c_ful_edu_desc}}</span>
                        <span>{{response.summary[0].c_ful_edu_deg}}</span>
                        <span>{{response.summary[0].c_ful_edu_major}}</span>
                      
                    </p>
                </li>
                <li v-if="response.summary[0].c_wrk_edu_school && response.summary[0].c_wrk_edu_school.trim()">
                
                    <p><i data-v-6626a34c=""></i>{{response.summary[0].c_wrk_edu_school}}</p>
                    <p>
                        
                        <span>{{response.summary[0].c_wrk_edu_desc}}</span>
                        <span>{{response.summary[0].c_wrk_edu_deg}}</span>
                        <span>{{response.summary[0].c_wrk_edu_major}}</span>
                      
                    </p>
                </li>
                <li v-if="schollShow">-</li>
            </ul> 
            <ul v-else>
                <li  v-for="item in 1">
                <span>{{item.c_begin_dt_desc}}--{{item.c_end_dt_desc}}</span>
                <span>{{item.comments}}</span>
                </li>                                          
            </ul> 
            </div>

        
        </section>

        <!-- 第二个区域 教育信息结束 -->

        <!-- 第三个区域 工作经历开始 -->
        
        <section class="work workPosi">
            <h2 class="work-title">
                职务
            </h2>
            <div class="work-content">
            <ul>
                <li >
                <div class="title">现任职务</div>
                <div class="content">{{response.summary[0].c_current_job}}</div>
                </li>
                <li >
                <div class="title">拟任职务</div>
                <div class="content">{{response.summary[0].c_intended_job}}</div>
                </li>
                <li >
                <div class="title">拟免职务</div>
                <div class="content">{{response.summary[0].c_inte_remov_job}}</div>
                </li>                                            
            </ul> 
            </div>
        </section>

        <!-- 第三个区域 工作经历结束 -->

        <!-- 第四个区域 家庭成员及主要社会关系 开始 -->

        <section class="work">
            <div class="work-content">
            <h2 class="work-title">
                简历
            </h2>
            <div  class='resumeList' v-if="response.summary[0].c_leader_resume" v-html="response.summary[0].c_leader_resume">

            </div>
            <ul v-else>
                <li  v-for="item in 1">
                <span>{{item.c_begin_dt_desc}}-{{item.c_end_dt_desc}}</span>
                <span>{{item.comments}}</span>
                </li>                                          
            </ul>                    
            </div>
        </section>

        <!-- 第四个区域 家庭成员及主要社会关系 结束 -->
        <section class="work">
            <div class="work-content">
            <h2 class="work-title">
                奖惩情况
            </h2>
            <ul>
                <li>
                  <span v-if="response.summary[0].c_rewrd_punish && response.summary[0].c_rewrd_punish.trim()" v-html="response.summary[0].c_rewrd_punish"></span>
                  <span v-else>-</span>
                </li>                                         
            </ul> 
            </div>
        </section>

        <section class="work">
            <div class="work-content">
            <h2 class="work-title">
                年度考核
            </h2>
            <ul>
                <li>
                    <span v-if="response.summary[0].c_anual_exam_reslt && response.summary[0].c_anual_exam_reslt.trim()">{{response.summary[0].c_anual_exam_reslt}}</span>
                    <span v-else>-</span>
                </li>     
            </ul> 
            </div>
        </section>

        <section class="work">
            <div class="work-content">
            <h2 class="work-title">
                任免理由
            </h2>
            <ul>
                <li v-for="item in 1">
                <span>{{item.c_begin_dt_desc}}-{{item.c_end_dt_desc}}</span>
                <span>{{item.comments}}</span>
                </li>                                         
            </ul> 

            </div>
        </section>

        <section class="work family" >
            <div class="work-content">
            <h2 class="work-title">
                家庭主要成员及重要社会关系
            </h2>
            <ul v-if="response.relation.length>0">
                <li class="relation"  v-for="item in response.relation">
                <div><span>{{item.name}}</span><span>{{item.age}}</span><span>{{item.c_relship_desc}}</span><span>{{item.c_political_sta}}</span></div>
                <div>{{item.c_work_unit_job}}</div>
                </li>                                        
            </ul> 
            <ul v-else>
                <li  v-for="item in 1">
                <span>{{item.c_begin_dt_desc}}-{{item.c_end_dt_desc}}</span>
                <span>{{item.comments}}</span>
                </li>                                          
            </ul> 
            </div>
        </section>              

  </div>
</template>

<script>

  export default {
    name: 'app',
    data() {
      return {
        selected:'A',
      };
    },

    methods: {
      handleImg : function(){
          var ImgObj = new Image(); //判断图片是否存在  
          ImgObj.src = this.Axios.baseURI + "/img/"+this.emplid+".png";  
          //没有图片，则返回-1  
          if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
            return this.Axios.baseURI + "/img/"+this.emplid+".png";  
          } else {  
            return '/static/imgs/man image.png';
          }  
      }
  
    },
    components: {
    },
    filters:{
      handleBirth:function(value){
        // console.log(value.trim().substr(0,date.length-2).replace('-','.'),"handleBirth");
        var result;
        if (!value) {
           return '';
        }
        var mid = value.trim().split(" ")[0];
        value && ( mid && (result = mid.replace(/-/g,'.')));
        console.log(result,"result");
        return result || "";
      },
      handlePartyTime:function(value){
        if (!value) {
            return ''
        }
        return  value.split(' ')[0]
      }
    },
    computed:{
        age:function(){
          console.log(this.response,'this.response');
          if (!this.response) {
              console.log('false');
              return;
          }
          var date;
          this.response.info[0].birthdate && (date =this.response.info[0].birthdate.split(" ")[0]);
          return date ? new Date().getFullYear() - new Date(date).getFullYear() : '';
          //    date && (result = date.trim().substr(0,date.length-2).replace('-','.'));


        },
        srcImg : function(){
            console.log(this.response,'this.response');
            if (!this.response) {
                console.log('false');
                return;
            }
            return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + this.emplid + '&sex=' +(this.response.info[0].sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
                
        },
        schollShow:function(){
            if (!this.response || !this.response.summary[0]) {
                return false;
            }
            return (!this.response.summary[0].c_wrk_edu_school || !this.response.summary[0].c_wrk_edu_school.trim()) && (!this.response.summary[0].c_ful_edu_school || !this.response.summary[0].c_ful_edu_school.trim());
        }

    },
    created:function(){

      // this.Axios.Post(this.URL.getEmployeeImg.url,{
      //           emplid:this.emplid
      //       }).then(res=>{
      //         this.srcImg = 'data:image/png;base64,'+ res.data.message;
      //       })
    },
    beforeCreate:function(){

    },
    mounted:function(){
          

    },
    props:['emplid','response']
  };
</script>

<style scoped lang='less'>
  .main {
    width: 100%;
    background-color:#fff;

    .main-title {
      width: 100%;
      border-bottom: 1/50rem solid #f1f1f1;
      img {
        width: 70/50rem;
        height: 70/50rem;
        position: relative;
        left: 50%;
        top: 0;
        margin-left: -35/50rem;
        margin-top: -35/50rem;
        background-color: yellowgreen;
        border-radius: 50%;
      }

      h1 {
        text-align: center;
        font-size: 24/50rem;
        padding: 18/50rem 0;
      }
      p {
        width: 75%;
        margin: 0 auto;
        display: flex;
      }
      p:first-of-type {
        justify-content: space-around;
      }
      p:nth-of-type(2) {
        padding: 10/50rem;
        justify-content: center;
        span:nth-of-type(2) {
          margin-left: 16/50rem;
        }
      }
    }

    .main-content {
      padding-bottom: 20rem/50;
      p {
        display: flex;
        padding-top: 10rem/50;
        span:first-of-type {
          flex: 2;
          text-align: right;
          // color: #999999;
        }
        span:last-of-type {
          flex: 7;
          padding-left: 20px;
        }
      }
    }
  }

  .education,.work {
    width: 100%;
    .education-title,.work-title {
      background-color: #f3f3f3;
      padding: 14/50rem 0 12/50rem 12/50rem;
      color: gray;
      font-weight: normal;
    }
    .education-content{
      background-color: #fff;
      ul {
        // padding-bottom: 16/50rem;
        li {
          line-height:2.5;
          padding: 0.32rem 0 0 0.6rem;
         
          p {
             i {
            padding: 8/50rem 0;
            
            font-weight: 500;
            display: inline-block;
            position: relative;
            &::before {
              content: "";
              width: 12/50rem;
              height: 12/50rem;
              background: #aaa;
      
              border-radius: 50%;
              position: absolute;
              left: -0.4rem;
              top: 62%;
              margin-top: -5rem/50;
            }
          }
          }
          p:last-of-type {
            
            span {
              display: inline-block;
              min-width: 1.5rem;
              margin-right:0.1rem;
            }
          }
        }
      }
    }

  .work-content {
      background-color: #fff;
      ul {
        // padding-bottom: 16/50rem;
        li {
          line-height:2.5;
          padding: 0.16rem 0 0.16rem 0.46rem;
         
          p {
             i {
              padding: 8/50rem 0;
              
              font-weight: 500;
              display: inline-block;
              position: relative;
              &::before {
                content: "";
                width: 12/50rem;
                height: 12/50rem;
                background: #aaa;
        
                border-radius: 50%;
                position: absolute;
                left: -0.4rem;
                top: 62%;
                margin-top: -5rem/50;
              }
            }


          }

          div{
            display: inline-block;
          }
          div.title{
            width:1.5rem;
            vertical-align: top;
          }
          div.content{
            width:calc(74%);
          }
          p:last-of-type {
            
            span {
              display: inline-block;
              width: 75/50rem;
            }
          }
        }
      }
    }
  }

  .resumeList{
    line-height: 0.6rem;
    padding: 0.2rem 0.2rem 0.2rem 0.46rem;
  } 

</style>
<style>
.leader-resume .relation span{
    display: inline-block;
    width:25%;
    }
.leader-resume .education-content{
    padding:0 0.4rem;
    }
  .family{
    margin-bottom:0.6rem;
    }
  .family .work-content ul li span{
      width:1.6rem;
      display: inline-block;
  }
  .family .work-content ul li:last-child{
      padding-bottom:0.32rem;
  }
.leader-resume .leader-container .basic-info>h2{
	display:inline-block;
	font-size:0.36rem;
	line-height: 0.44rem;
  height: 0.44rem;
}
.leader-resume .leader-container .basic-info .sex{
	color:#888;
}
.leader-resume .leader-container .basic-info{
	margin-top:0.02rem;
	margin-bottom: 0.04rem;

}
.leader-resume .leader-container .posi-info{
	font-size:0.32rem;
  height:0.5rem;
	line-height:0.5rem;
}
.leader-resume .ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.leader-resume{
	padding-left:0.3rem;
	padding-top:0.24rem;
  padding-bottom: 0.3rem;
  background-color:#fff;
  margin-bottom: 0.02rem;  
}
.leader-resume>div{	
	display:inline-block;
}
.leader-resume .leader-container{
	padding-left:0.1rem;
	max-width: 6rem;
}
.pic{
	vertical-align: top;
	width:0.92rem;
	height:0.92rem;
}
.pic img{
	width:0.92rem;
	height:0.92rem;
	border-radius:50%;
}
.workPosi .work-content li span:nth-child(2){
  margin-left:0.32rem;
}
</style>

